<template>
  <div class="header_box">
    <div>
      <i class="icon-arrow-left iconfont" v-show="showBack==true"  @click="goBack"></i>
    </div>
    <div>{{title}}</div>

    <div @click="rightAction">{{rightText}}</div> 
    <div @click="rightActionGuc">{{$t("lang.Withdraw")}}</div>
  </div>
</template>

<script>
export default {
  props: ["showBack", "title", "rightText"], 
  methods:{
    rightAction(){
      this.$emit('rightAction');
    },
    rightActionGuc(){
      this.$emit('rightActionGuc');
    }
  }
};
</script>

<style>
.header_box {
  width: 100%;
  height: 44px;
  line-height: 44px;
  font-size: 16px;
  color: #fff;
  display: flex;
  background: #890400;
}
.header_box i{
  padding:10px;
  font-size: 20px;
}
.header_box div:nth-child(1) {
  width:20%;
  box-sizing: border-box;
}
.header_box div:nth-child(2) {
  width:60%;
  text-align:center;
}
.header_box div:nth-child(3) {
  width:15%;
  text-align:center;
  font-size:12px;
}
.header_box div:nth-child(4) {
  width:15%;
  text-align:center;
  font-size:12px;
}
.header_box + div {
  position: absolute;
  width: 100%;
  top: 44px;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>